<template>
  <div style="background: #202B61;width: 100%;height: 100%;">
    <!-- 负荷仿真结果展示 -->
    <div style="top: 1%; width: 100%;height: 56vh;float: left;display: inline-flex;    margin-top: 1vh;">


      <div class="box1">
        
        <!-- <div class = "title">
          <div style="position: relative;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">电负荷</span></div>
        </div> -->

        <el-form ref="materialResourceData" :rules="materialResourceRules" label-width="100px"
                   label-suffix=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;" :inline="true"
                   :model="materialResourceData">
          <el-form-item label-width="150px" label="预测准确率">
              <el-input style="width: 120px;" v-model="value1">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">%</i>
              </el-input>
            </el-form-item>

        
          </el-form>

        <div id="echartsArea1" style="width: 90%;margin: auto;height: 80%;margin-top: 0vh;"></div>
      </div>


      <div class="box2">
        
        <!-- <div class = "title">
          <div style="position: relative;left: 0%;line-height: 5vh;"><span style="margin-left: 1vh;">冷负荷</span></div>
        </div> -->

         

        <div id="echartsArea2" style="width: 90%;margin: auto;height: 80%;margin-top: 10vh;"></div>
      </div>



    </div>


  </div>
</template>

<script type="text/ecmascript-6">

let name = '多能流统一建模误差'
let lineColor = "#5AC2DB"
let areaColor = ['rgba(143, 210, 240, 0.53)', 'rgba(40, 84, 126, 0.14)']
let axisData1 = ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30', '01:45', '02:00', '02:15', '02:30', '02:45', '03:00', '03:15', '03:30', '03:45', '04:00', '04:15', '04:30', '04:45', '05:00', '05:15', '05:30', '05:45', '06:00', '06:15', '06:30', '06:45', '07:00', '07:15', '07:30', '07:45', '08:00', '08:15', '08:30', '08:45', '09:00', '09:15', '09:30', '09:45', '10:00', '10:15', '10:30', '10:45', '11:00', '11:15', '11:30', '11:45', '12:00', '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45', '14:00', '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45']
let seriesData1 = [
   [0,0,0,0,0,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0.034510002
,0.418180019
,0.937860012
,1.524530053
,2.198490143
,2.801400185
,3.359650135
,4.005189896
,4.524869919
,4.96944046
,5.243490219
,5.663700104
,5.996620178
,5.960080147
,6.431040287
,6.518330574
,6.481790543
,6.526450157
,6.54472065
,6.552840233
,6.469610214
,6.520359993
,6.390439987
,6.254430294
,6.100150108
,5.927599907
,5.608890533
,5.357170105
,5.052670479
,4.740050316
,4.297510147
,3.761590242
,3.274390221
,2.620729923
,2.070600033
,1.471750021
,0.939890027
,0.468930006
,0.172550008
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0],[
0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0.188018604
,0.351500402
,0.682964888
,1.142775606
,1.691586709
,2.28947135
,2.897083463
,3.474496653
,3.982364824
,4.381051246
,4.652698071
,4.902712027
,5.149096266
,5.389527734
,5.621538495
,5.842805045
,6.050859855
,6.243378985
,6.418040268
,6.572230404
,6.703915687
,6.810338819
,6.889321195
,6.938539732
,6.955381611
,6.851426866
,6.564680347
,6.132745717
,5.593226639
,4.984162789
,4.3428667
,3.707088064
,3.114575413
,2.603077539
,2.089111713
,1.512134204
,0.943432388
,0.454293614
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0
,0]
]

let axisData2 = ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日']
let seriesData2 = [
   [92.8872,92.6444,89.7734,97.2053,93.2683,92.2416,95.2624,86.5186,91.2479,91.3806,91.8299,89.3534,92.4887,86.9958,91.6448,92.3078,91.348,92.1586,89.9026,92.529,90.6807,88.1117,90.8095,90.1901,89.3808,92.44,91.5109,90.9205,90.3345,94.7832
]
]


var option1 = {
   //backgroundColor: '#0F224C', //背景色
   title: {
		text: '功率预测结果',
		textStyle: {
			color: '#FFF',
			fontSize: 16
		},
		top:"2%",
		left: 'center',
// 		right: '5%'
	},
   grid: {
      left : '5%',
      right : '3%',
      bottom : '1%',
      top : '15%',
      containLabel: true
   },
   tooltip: {
      trigger: "axis",
      axisPointer: {
         lineStyle: {
            color: "rgba(255,255,255,0.7)"
         }
      },
      backgroundColor: "rgba(255,255,255,0.1)",
      padding: [5, 10],
      textStyle: {
         color: "rgb(255,255,255)"
      }
   },
   legend: {
      x: "center",
      y: "bottom",
      icon: "circle",
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 60,
      textStyle: {
         color: "#C0C4CC",
         fontSize: 13,
         fontWeight: 'bold',
      },
      data: [""]
   },
   xAxis: {
      type: "category",
      data: axisData1,
      boundaryGap: true,
      splitLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      // type: 'dashed',
      axisLine: {
         lineStyle: {
            type: 'dashed',
            color: "#2557B4"
         }
      },
      axisLabel: {
         margin: 10,
         textStyle: {
            fontSize: 14,
            color: "#C0C4CC"
         }
      }
   },
   yAxis: [
      {
         type: "value",
         position: "left",
         name: '功率（MW）',
         scale : true,
         nameTextStyle: {
            
            color: '#C0C4CC',
            fontSize: 13,
            fontWeight: 'bold',
            // lineHeight: 40,
         },
         splitLine: {
            show: true,
            lineStyle: {
               type: 'dashed',
               color: "#C0C4CC"
            }
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "rgba(255,255,255,0.3)"
            }
         },

         axisLabel: {
            show: true,
            margin: 2,
            textStyle: {
               fontSize: 12,
               color: "#DEEBFF"
            }
         }
      },],
   series: [
      {
         name: "数据",
         type: "line",
         smooth: true,
         showSymbol: false,
         symbol: 'circle',
         // showSymbol: true,
         // symbol: 'circle',
         data: seriesData1[0],
         itemStyle: {
            normal: {
               color: '#287CE8'
            }
         },
         lineStyle: {
            normal: {
               width: 3
            }
         },


      },      {
         name: "数据",
         type: "line",
         smooth: true,
         showSymbol: false,
         symbol: 'circle',
         // showSymbol: true,
         // symbol: 'circle',
         data: seriesData1[1],
         itemStyle: {
            normal: {
               color: 'red'
            }
         },
         lineStyle: {
            normal: {
               width: 3
            }
         },


      }
      
   ]
}




var option2 = {
   //backgroundColor: '#0F224C', //背景色
   title: {
		text: '预测误差',
		textStyle: {
			color: '#FFF',
			fontSize: 16
		},
		top:"2%",
		left: 'center',
// 		right: '5%'
	},
   grid: {
      left : '5%',
      right : '3%',
      bottom : '1%',
      top : '15%',
      containLabel: true
   },
   tooltip: {
      trigger: "axis",
      axisPointer: {
         lineStyle: {
            color: "rgba(255,255,255,0.7)"
         }
      },
      backgroundColor: "rgba(255,255,255,0.1)",
      padding: [5, 10],
      textStyle: {
         color: "rgb(255,255,255)"
      }
   },
   legend: {
      x: "center",
      y: "bottom",
      icon: "circle",
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 60,
      textStyle: {
         color: "#C0C4CC",
         fontSize: 13,
         fontWeight: 'bold',
      },
      data: [""]
   },
   xAxis: {
      type: "category",
      data: axisData2,
      boundaryGap: true,
      splitLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      // type: 'dashed',
      axisLine: {
         lineStyle: {
            type: 'dashed',
            color: "#2557B4"
         }
      },
      axisLabel: {
         margin: 10,
         textStyle: {
            fontSize: 14,
            color: "#C0C4CC"
         }
      }
   },
   yAxis: [
      {
         type: "value",
         position: "left",
         scale : true,
         name: '单位：%',
         nameTextStyle: {
             color: '#C0C4CC',
            fontSize: 13,
            fontWeight: 'bold',
            // lineHeight: 40,
         },
         splitLine: {
            show: true,
            lineStyle: {
               type: 'dashed',
               color: "#C0C4CC"
            }
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "rgba(255,255,255,0.3)"
            }
         },

         axisLabel: {
            show: true,
            margin: 2,
            textStyle: {
               fontSize: 12,
               color: "#DEEBFF"
            }
         }
      },],
   series: [
      {
         name: "数据",
         type: "bar",
         smooth: true,
         showSymbol: false,
         symbol: 'circle',
         // showSymbol: true,
         // symbol: 'circle',
         data: seriesData2[0],
         itemStyle: {
            normal: {
               color: '#287CE8'
            }
         },
         lineStyle: {
            normal: {
               width: 3
            }
         },


      }
      
   ]
}



  // 引入基本模板,按需加载
  let echarts = require('echarts/lib/echarts');
  var myChart1,myChart2,myChart3;

  export default {
    name: 'simulationResult',
    components: {

    },
    data () {
      return {
        value1:"93.2",
        value2 : "5.6",
        value3 : "8.7",
        value4 : "90"
      }
    },
    mounted (){


        myChart1 = echarts.init(document.getElementById('echartsArea1'));
  
        myChart2 = echarts.init(document.getElementById('echartsArea2')); 

        myChart1.clear();
        myChart2.clear();
 
        myChart1.setOption(option1);
        myChart2.setOption(option2); 

        window.onresize = function(){
          myChart1.resize();
          myChart2.resize(); 
        }



    },
    methods: {
      cloneObj:function (obj) {
        var newObj = {};
        if (obj instanceof Array) {
          newObj = [];
        }
        for (var key in obj) {
          var val = obj[key];
          //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。
          newObj[key] = typeof val === 'object' ? this.cloneObj(val): val;
        }
        return newObj;
      },


    }
  }


</script>

<style scoped >



  /deep/ .el-dialog, .el-pager li {
    background: #202B61;
    -webkit-box-sizing: border-box;
  }


  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background: #374590;
  }

  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }

  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }


  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }


  .box1{ 
    width: 49%;
    height: 99%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;

    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box2{ 
    width: 49%;
    height: 99%;
    margin-left: 2vh;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box3{
    position: relative;
    width: 100%;
    height: 48vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }




  .title{
    width:100%;
    height:5vh;
    line-height: 5vh;
    background:rgba(55, 69, 144, 1);

    font-weight:bold;
    background: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vh;
    color: #FFFFFF;
    text-align: left;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(55, 69, 144, 1);
    border-radius: 1px;
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.345098039215686);
  }


</style>
